<template>
  <div class="main">
    <div class="login">
      <h1 class="iconfont icon-wangyiyunyinle1"></h1>

      <div class="form"  v-show="phones">
        <div class="item">
          <span class="iconfont icon-shouji"></span>
          <input type="text" placeholder="手机号码" v-model="phone" />
        </div>
        <div class="item">
          <span class="iconfont icon-mima"></span>
          <input type="password" placeholder="密码" v-model="password" />
        </div>
        <div class="item">
          <span class="iconfont icon-yanzhengma"></span>
          <input type="text" placeholder="验证码" v-model="code" />
          <button class="getCode" @click="getCode">发送</button>
        </div>
        <div class="item">
          <div class="submit" @click="submit">提交</div>
        </div>
        <!-- <div class="bottom">
          <div class="bottom-a">
            <span></span>
            <p>其他登录方式</p>
            <span></span>
          </div>
          <div class="bottom-b">
            <span class="iconfont icon-sign_wechat"></span>
            <span class="iconfont icon-qq1"></span>
            <span class="iconfont icon-weibo"></span>
            <span class="iconfont icon-wangyi"></span>
          </div>
        </div> -->
      </div>


        <!-- 邮箱登录 -->
      <div class="form" v-show="mailboxs">
        <div class="item">
          <span class="iconfont icon-shoujihao"></span>
          <input type="text" placeholder="邮箱账号" v-model="emailAccounts" />
        </div>
        <div class="item">
          <span class="iconfont icon-mima"></span>
          <input type="password" placeholder="密码" v-model="mailboxQassword" />
        </div>
        <div class="item">
          <div class="submit" @click="mailboxSubmit">提交</div>
        </div>
      </div>

        <!-- 二维码登录 -->
      <div class="form" v-show="qrCodes">
          <div class="qrCodes">
              <img :src="Create" alt="">
          </div>
      </div>

       <div class="loginData">
          <div class="loginIcon"  @click="phoney">
            <span class="iconfont icon-shoujihaodenglu"></span>
            <p>手机登录</p>
          </div>
          <div class="loginIcon" @click="mailbox">
             <span class="iconfont icon-youxiangdenglu-"></span>
             <p>邮箱登录</p>
          </div>
          <div class="loginIcon" @click="qrCode">
            <span class="iconfont icon-erweimadenglu"></span>
            <p>二维码登录</p>
          </div>
      </div>




    </div>
  </div>
</template>
<script>
import {
  getCaptchaSent,
  getCaptchaVerify,
  getLoginCellphone,
   getLogin,
  getLoginQrKey,
  getLoginQrCreate,
} from "../../api/login";
import { Toast } from "vant";
export default {
  data() {
    return {
      phone: "",
      password: "",
      code: "",
      loginIcon:0,

      phones:true,
      mailboxs:false,
      qrCodes:false,

      emailAccounts:"",//邮箱账号
      mailboxQassword:"",//邮箱密码

      LoginQrKey:"",
      Create:"",
    };
  },
  methods: {
    phoney(){
        this.phones = true;
        this.mailboxs = false;
        this.qrCodes = false;
    },
    mailbox(){
        this.phones = false;
        this.mailboxs = true;
        this.qrCodes = false;
    },
    qrCode(){
        this.phones = false;
        this.mailboxs = false;
        this.qrCodes = true;

        getLoginQrKey().then(data=>{
          // console.log(data);
          this.LoginQrKey = data.data.unikey
          
        })


       this.getLoginQrCreateFun();
    },


    //手机密码登录
    // submit(){
       // 1.验证手机号码
      // let reg =
      //   /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
      // if (!reg.test(this.phone)) {
      //   Toast("请输入正确手机号码");
      //   return;
      // }

      // 密码
      // let regPassword = /^[a-zA-Z]\w{5,17}$/;
      // if (!regPassword.test(this.password)) {
      //   Toast("请填写正确信息");
      //   return;
      // }

    //   getLoginCellphone({phone:this.phone,password:this.password}).then((data)=>{
    //     console.log(data);
    //   })
    // },



    getCode() {
      // 1.验证手机号码
      let reg =
        /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
      if (!reg.test(this.phone)) {
        Toast("请输入正确手机号码");
        return;
      }
      // 请求接口验证码
      getCaptchaSent({ phone: this.phone }).then((data) => {
        if (data.data) {
          Toast("验证码发送成功");
        } else {
          Toast("验证码发送失败");
        }
      });
    },
    submit() {
      let regCode = /^[0-9]{4}$/;
      // 验证码
      if (!regCode.test(this.code)) {
        Toast("请输入正确验证码");
        return;
      }
      // 1.验证手机号码
      let regPhone =
        /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
      if (!regPhone.test(this.phone)) {
        Toast("请填写正确信息");
        return;
      }
      // 密码
      let regPassword = /^[a-zA-Z]\w{5,17}$/;
      if (!regPassword.test(this.password)) {
        Toast("请填写正确信息");
        return;
      }
      getCaptchaVerify({ phone: this.phone, captcha: this.code })
        .then((data) => {
          if (data.data) {
            // 验证手机密码
            getLoginCellphone({
              phone: this.phone,
              password: this.password,
            }).then((info) => {
              // console.log(info);
              Toast("登陆成功");
              window.localStorage.setItem("login", info.cookie);
              window.localStorage.setItem("token", info.token);
              window.localStorage.setItem("uid", info.account.id);
              //登陆成功跳回个人中心页面
              // this.$router.push("/userInfo");
              this.$router.push("/recommend");
            });
          } else {
            Toast("请填写正确信息");
          }
        })
        .catch(() => {
          Toast("请填写正确信息");
        });
    },

    //邮箱登录
    mailboxSubmit(){
      // console.log("邮箱账号",this.emailAccounts);
      // console.log("邮箱密码",this.mailboxQassword);

        let regemailAccounts = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        if (!regemailAccounts.test(this.emailAccounts)) {
        Toast("请填写正确信息");
        return;
      }
      
      //   let regmailboxQassword = /^[a-zA-Z]\w{5,17}$/;
      //    if (!regmailboxQassword.test(this.mailboxQassword)) {
      //   Toast("请填写正确信息");
      //   return;
      // }

      getLogin({email:this.emailAccounts,password:this.mailboxQassword}).then(data=>{
  // console.log(data);
        window.localStorage.setItem("login",data.cookie);
        window.localStorage.setItem("token", data.token);
        window.localStorage.setItem("uid", data.account.id);
        Toast("登陆成功");
         this.$router.push("/recommend");
        // console.log(data);
      })


    },

    //二维码
    getLoginQrCreateFun(){
      // console.log(this.LoginQrKey);
         getLoginQrCreate({key: this.LoginQrKey,qrimg:1}).then(data=>{
          //  console.log(data);
          //  console.log(data.data);
            this.Create = data.data.qrimg
          })
    },



  },
 
}

</script>

<style lang="less">
.main {
  height: 100%;
}
.login {
  background-color: #d4473c;
  width: 100%;
  height: 100%;
  color: #fff;
  h1 {
    font-size: 48px;
    text-align: center;
    height: 48px;
    padding: 150px 0 40px 0;
  }
}

.form {
  .bottom {
    text-align: center;
    position: relative;
    .bottom-a {
      font-size: 16px;
      line-height: 80px;
      &::after {
        position: absolute;
        content: "";
        display: block;
        background: white;
        height: 1px;
        width: 50px;
        top: 40px;
        left: 75px;
      }
      &::before{
          position: absolute;
        content: "";
        display: block;
        background: white;
        height: 1px;
        width: 50px;
        top: 40px;
        right: 75px;
      }
    }
    .bottom-b {
      span {
        font-size: 34px;
        // background-image: linear-gradient(90deg, #ff9366, #ff6962);
        background: -webkit-gradient(
          linear,
          0 0,
          0 100%,
          from(#ff9366),
          to(#ff6762)
        );
        border-radius: 50%;
        line-height: 45px;
        margin: 10px;
      }
    }
  }
  .item {
    width: 76%;
    height: 30px;
    line-height: 30px;
    margin: 0 auto;
    background-color: #f47378;
    border-radius: 30px;
    margin-bottom: 12px;
    input {
      background-color: transparent;
      border: 0px;
      outline: none;
      text-indent: 0.5em;
      font-size: 14px;
      color: #fff;
    }
    span {
      font-size: 20px;
      margin-left: 10px;
      display: inline-block;
      vertical-align: middle;
    }
    .getCode {
      border: 1px solid #fff;
      height: 20px;
      line-height: 20px;
      width: 50px;
      border-radius: 20px;
      font-size: 12px;
      color: #808080;
      float: right;
      margin: 5px;
    }
    .submit {
      font-size: 15px;
      background-color: #fff;
      text-align: center;
      color: #d4473c;
      border-radius: 15px;
    }
  }
   .qrCodes{
    height: 120px;
    width: 120px;
    margin: 0 auto;
    border: 1px solid yellow;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
.loginData{
  width: 76%;
  height: 50px;
  margin: 50px auto;
  display: flex;
  justify-content: space-around;
  .loginIcon{
    width: 22%;
    height: 100%;
    line-height: 100%;
    text-align: center;
    span{
      font-size: 30px;
    }
    p{
      margin-top: 10px;
      font-size: 10px;
    }
  }
}

</style>